<template>
	<div>
		<image @click="chooseType()" :src="addImage" :style="{ width, height }" v-if="tempFilePaths.length < 5" />
		<div class="preview" v-if="tempFilePaths.length > 0 && ispreview">
			<div class="item" v-for="(item, index) in tempFilePaths" :key="index">
				<image :style="{ width, height }" @click="preview(item)" :src="item" />
				<image @click="del(index)" src="../static/images/detele.png" />
			</div>
		</div>
	</div>
</template>
<script>
	import {
		policy
	} from "@/apis/request";
	export default {
		props: {
			idx: {
				type: Number,
			},
			type: {
				type: Number,
				default: 0
			},
			width: {
				default: 227 + "rpx"
			},
			height: {
				default: 222 + "rpx"
			},
			ispreview: {
				default: true //是否显示预览图片，默认为true
			},
			addImage: {
				type: String,
				default: '../static/images/uploadn.png'
			}
		},
		data() {
			return {
				tempFilePaths: [], //临时图片数组
				index: 0, //记录上传图片下标
				imgList: [], //最终上传完成的图片数组
				formParam: {},
				host: ""
			};
		},
		methods: {
			async getpolicy() {
				this.params = await policy();
			},
			chooseType() {
				if (this.type == 2) {
					if (this.imgList.length > 0) {
						this.chooseImg();
					} else {
						uni.showActionSheet({
							itemList: ['图片', '视频'],
							success: (res) => {
								if (res.tapIndex == 1) {
									this.chooseVideo();
								} else {
									this.chooseImg();
								}
							}
						});
					}
				} else if (this.type == 1) {
					this.chooseVideo();
				} else {
					this.chooseImg();
				}
			},
			chooseImg() {
				//选择图片
				wx.chooseImage({
					count: 9 - this.imgList.length,
					sizeType: ["original", "compressed"],
					sourceType: ["album", "camera"],
					success: res => {
						// tempFilePath可以作为img标签的src属性显示图片
						// const tempFilePaths = res.tempFilePaths;
						this.tempFilePaths.push(...res.tempFilePaths);
						//选择完毕上传图片
						this.uploadImg(this.tempFilePaths);
						wx.showLoading({
							title: "上传图片中...",
							mask: true
						});
					}
				});
			},
			chooseVideo() {
				//选择视频
				uni.chooseVideo({
					success: (res) => {
						this.uploadVideo(res.tempFilePath);
						uni.showLoading({
							title: "上传视频中...",
							mask: true
						});
					}
				})
			},
			uploadImg(file) {
				let {
					host,
					dir,
					accessKeyId,
					policy,
					signature
				} = this.params;
				const aliyunFileKey = dir + "/" + new Date().getTime() + ".png";
				const formParam = {
					key: aliyunFileKey,
					policy: policy,
					OSSAccessKeyId: accessKeyId,
					signature: signature,
					success_action_status: "200"
				};
				wx.uploadFile({
					url: host,
					filePath: file[this.index],
					name: "file",
					formData: formParam,
					success: res => {
						if (res.statusCode != 200) {
							this.$Toast(`上传出错${JSON.stringify(res)}`);
							return;
						}
						let data = host + "/" + aliyunFileKey;
						this.imgList.push(data);
						this.index++;
						if (this.index < file.length) {
							//小于说明还未上传完成
							this.uploadImg(file);
						} else {
							//上传完成
							//通知父级有上传病例图片,0否1是
							this.$emit("Upload", this.imgList.toString());
							wx.hideLoading();
							wx.showToast({
								title: "图片上传完成",
								icon: "none",
								duration: 2000
							});
						}
					},
					fail: err => {
						// 图片上传失败
						wx.hideLoading();
						this.$dialog(
								"提示",
								`第${this.index + 1}张图片上传失败，是否重新上传`
							)
							.then(res => {
								//用户点击确定，重新上传该图
								this.uploadImg(file);
							})
							.catch(err => {
								this.tempFilePaths.splice(this.index, 1);
								if (this.index < this.tempFilePaths.length) {
									wx.showLoading({
										title: "继续上传...",
										mask: true,
										success: res => {
											this.index++;
											this.uploadImg(file);
										}
									});
								} else {
									this.index = 0;
									this.$emit("Upload", this.imgList.toString());
									wx.showToast({
										title: "图片上传完成",
										icon: "none",
										duration: 2000
									});
								}
							});
					}
				});
			},
			uploadVideo(file) {
				let {
					host,
					dir,
					accessKeyId,
					policy,
					signature
				} = this.params;
				const aliyunFileKey = dir + "/" + new Date().getTime() + ".mp4";
				const formParam = {
					key: aliyunFileKey,
					policy: policy,
					OSSAccessKeyId: accessKeyId,
					signature: signature,
					success_action_status: "200"
				};
				uni.uploadFile({
					url: host,
					filePath: file,
					name: "file",
					formData: formParam,
					success: res => {
						if (res.statusCode != 200) {
							this.$Toast(`上传出错${JSON.stringify(res)}`);
							return;
						}
						let data = host + "/" + aliyunFileKey;
						//通知父级有上传病例图片,0否1是
						this.$emit("Upload", data);
						wx.hideLoading();
						wx.showToast({
							title: "视频上传完成",
							icon: "none",
							duration: 2000
						});
					},
					fail: err => {
						// 图片上传失败
						wx.hideLoading();
						this.$dialog(
							"提示",
							'视频上传失败，是否重新上传'
						).then(res => {
							//用户点击确定，重新上传该图
							this.uploadVideo(file);
						});
					}
				});
			},
			preview(img) {
				this.$Imgpreview(img, this.tempFilePaths);
			},
			del(index) {
				this.$dialog("提示", "是否确认删除").then(res => {
					this.tempFilePaths.splice(index, 1);
					this.imgList.splice(index, 1);
					this.$emit("Upload", this.imgList.toString());
				});
			}
		},
		created() {
			this.getpolicy();
		}
	};
</script>
<style lang="scss" scoped>
	.preview {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		margin-top: 20rpx;

		.item {
			margin: 10rpx 20rpx 0rpx 0rpx;
			position: relative;

			image:nth-child(1) {
				width: 210rpx;
				height: 210rpx;
				border-radius: 10rpx;
			}

			image:nth-child(2) {
				position: absolute;
				top: -11px;
				right: -14px;
				width: 55rpx;
				height: 53rpx;
			}
		}
	}
</style>